<!--
 * @Author: Bobby
 * @Date: 2021-12-30 10:01:42
 * @LastEditTime: 2022-03-23 15:02:32
 * @LastEditors: Bobby
 * @Description:
 * @FilePath: \wms-v2\src\ve\elements\basic\uiForm\uiForm.vue
 * CIMC-V2
-->
<template>
  <div
    :id="hasPreview ? info._id : `diy_${info._id}`"
    ref="chart"
    class="ui-line-chart h-full"
    :style="{
      width: '100%',
    }"
  ></div>
</template>
<script>
  import { defineComponent } from 'vue'
  import { UiMixin, RefsInjectMixin, ChartMixin } from '@ve/mixin'
  import { scatterOption } from './chartOptionJson.js'
  import cloneDeep from 'lodash/cloneDeep'
  import * as echarts from 'echarts'
  export default defineComponent({
    name: 'UiScatterChart',
    components: {},
    mixins: [UiMixin, RefsInjectMixin, ChartMixin],
    inject: {
      hasPreview: { default: false },
    },
    props: {
      info: {
        required: true,
        type: Object,
        default: function () {
          return {}
        },
      },
    },
    data() {
      return {}
    },
    watch: {
      'info.extension': {
        handler() {
          this.$nextTick(() => {
            this.initChart()
          })
        },
        deep: true,
      },
      getSelectModule: {
        handler(val, oldVal) {
          if (!oldVal.extension) {
            if (scatterOption[this.info.chartTypeValue]) {
              this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = false)
            } else {
              this.getSelectModule.extension && this.getSelectModule.extension.series && (this.getSelectModule.extension.series.isShowBtn = true)
            }
          }
        },
        deep: true,
      },
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    methods: {
      initChart() {
        let dataObj = [
          [10.0, 8.04],
          [8.07, 6.95],
          [13.0, 7.58],
          [9.05, 8.81],
          [11.0, 8.33],
          [14.0, 7.66],
          [13.4, 6.81],
          [10.0, 6.33],
          [14.0, 8.96],
          [12.5, 6.82],
        ]
        let str = 'abcdefghijklmnopqrstuvwxyz'
        let chartDom = this.$refs.chart
        let myChart = echarts.init(chartDom)
        let scatterOptions = cloneDeep(scatterOption)
        let series = scatterOptions[this.info.chartTypeValue]
        let data = cloneDeep(this.info.extension)
        let option = this.formatterOption(data)
        if (series) {
          option = Object.assign(option, series(dataObj))
        }
        option.color = option.color.map((item) => item.v)
        // if (Array.isArray(option.xAxis)) {
        //   option.xAxis.map((item) => {
        //     item.type = 'value'
        //     item.data = Object.keys(dataObj)
        //     return item
        //   })
        // } else {
        //   option.xAxis.type = 'value'
        //   option.xAxis.data = Object.keys(dataObj)
        // }
        option.series.map((item, index) => {
          if (item?.tooltip?.positionType) {
            delete item['tooltip']['position']
          }
          item.name = str.slice(index, index + 1)
          item.data = dataObj
          return item
        })
        console.log(JSON.stringify(option))
        option && myChart.setOption(cloneDeep(option), true)
      },
    },
  })
</script>
<style lang="scss">
  .uiScatterChart {
    height: 100%;
  }
</style>
